<template>
  <div class="adviser-container">
    <div class="r-adviser" @click="onSelfDocter">
      <img src="../../../assets/images/enters/r-adviser.png" alt="adviser" />
    </div>
    <div class="r-dowm">
      <div class="r-docter">
        <div class="r-docter-box">
          <h3>名医列表</h3>
          <van-button
            @click="onChectDocteList"
            type="primary"
            size="small"
            round
            color="#46d7dc"
            >查看</van-button
          >
        </div>
        <img src="../../../assets/images/enters/r-docter.png" alt="docter" />
      </div>
      <div class="r-hospital">
        <div class="r-hospital-box">
          <h3>认证医院</h3>
          <van-button
            @click="onChectHospitalList"
            type="primary"
            size="small"
            round
            color="#46d7dc"
            >查看</van-button
          >
        </div>
        <img
          src="../../../assets/images/enters/r-hospital.png"
          alt="hospital"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onSelfDocter() {
      this.$toast("私人顾问-立刻查询...")
    },
    onChectDocteList() {
      this.$toast("查看-名医列表...")
    },
    onChectHospitalList() {
      this.$toast("查看-认证医院...")
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/style/global.scss";

.adviser-container {
  width: 100%;
  @include center;
  flex-direction: row;
  flex-wrap: wrap;
  .r-adviser {
    width: 100%;
    padding: 10px;
  }
  .r-dowm {
    width: 100%;
    @include center;
    margin: 0 10px 0 10px;
    border-bottom: 1px solid rgba(209, 209, 209, 0.3);
    box-shadow: 0px 2px 7px rgba(209, 209, 209, 0.4);
    box-sizing: border-box;
    .r-docter {
      width: 50%;
      @include center;
      padding: 0 20px;
      .r-docter-box {
        h3 {
          margin-bottom: 6px;
        }
      }
      img {
        width: 50%;
      }
    }
    .r-hospital {
      width: 50%;
      @include center;
      padding: 0 20px;
      .r-hospital-box {
        h3 {
          margin-bottom: 6px;
        }
      }
      img {
        width: 50%;
      }
    }
  }
}
</style>
